<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>22-flex布局实例 -实用的多栏分屏结构布局</title>
<style type="text/css">
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
body {
}
.box {
	width: 800px;
}
.flex {
	display: flex;
}
.column {
	flex-direction: column;
}
.ai-c{
		align-items: center;
	}
.jc-c{
		justify-content: center;
	}
.mt-10 {
	margin-top: 10px;
}
.mb-10 {
	margin-bottom: 10px;
}
.mr-10 {
	margin-right: 10px;
}
.ml-10 {
	margin-left: 10px;
}
.left {
	background-color: rgba(255,0,4,1.00);
	flex: 1;
}
.right {
	background-color: rgba(1,50,255,1.00);
	flex: 1;
}
.vh-100 {
	height: 100vh;
}
.center {
	background-color: rgba(243,255,0,1.00);
	flex: 1;
}
</style>
</head>

<body>
<div class="flex vh-100">
  <div class="left">此处为新 div 标签的内容</div>
	<div class="center">中间</div>
  <div class="right">此处为新 div 标签的内容</div>
</div>
</body>
</html>
